<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 本框架基本脚本和样式 -->
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/MBase.js"></script>
<!-- 界面单独引入的其他样式和脚本 -->
<script type="text/javascript"
	src="${path }/resource/js/function/public.js"></script>
<style type="text/css">
.console {
	overflow: scroll;
	max-height: 700px;
	background: #fff;
}

#treeDemo li:HOVER {
	background: #efefef;
	color: #339933;
	cursor: pointer;
}
</style>
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content">
		<div class="row text-center">
			<img alt="" class="pd-20"
				src="http://www.zkingsoft.com/resource/images/logo.png">
			<h1>项目发布工具</h1>
		</div>

		<div class="row">
			<div class="col-sm-3">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>Tomcat列表</h5>
						<div class="pull-right ">
							<a class="f-r text-success " onclick="openAddTomcat()"><i
								class="fa fa-plus c-success"></i> 添加Tomcat</a>
						</div>
					</div>
					<div class="ibox-content " style="min-height: 400px">
						<ul class="list-group" id="treeDemo">


						</ul>
					</div>
				</div>
			</div>
			<div class="col-sm-9">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>管理Tomcat</h5>
						<div class="ibox-tools"></div>
					</div>
					<div class="ibox-content" style="min-height: 400px">
						<form style="display:;" class="form-horizontal dataform " onsubmit="return upload()"
							action="${path }/doUpload" method="post" enctype="multipart/form-data"
							id="dataform">
							<div class="form-group">
							 <label
									class="col-sm-2 control-label">Tomcat名称</label>
								<div class="col-sm-3">
									<input id="tomcat-name" name="name"  type="text" class="form-control" readonly="readonly" >
								</div>

								<label class="col-sm-2 control-label">端口号</label>
								<div class="col-sm-3">
									<input type="text" id="listen_port" class="form-control " readonly="readonly">
								</div>
							</div>
							<div class="form-group">
								 <label
									class="col-sm-2 control-label">备注</label>
								<div class="col-sm-8">
									<input id="remark"   type="text" class="form-control">
								</div>

							
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">上传war包</label>
								<div class="col-sm-8">
									<input id="icon" name="warFile" type="file"
										style="width: 60%; float: left;" class="form-control ">
									<button type="submit" style="float: left;" 
										class="btn btn-success">上传</button>
								</div>
							</div>

						</form>
					</div>
					<div class="panel-footer">
						<div class="col-sm-12 text-center">
							<button type="button" class="btn btn-primary" onclick="updateRemark()" >
								<i class="fa fa-check"></i>更新信息
							</button>
							<button type="button" class="btn btn-success" onclick="excute('startup')" >
								<i class="fa fa-play"></i>启动
							</button>
							<button type="button" class="btn btn-danger" onclick="excute('shutdown')" >
								<i class="fa  fa-stop"></i>停止
							</button>
							<button type="button" class="btn btn-warning"  onclick="excute('clear')">
								<i class="fa fa-trash"></i>清空webapps
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="wrapper wrapper-content">
			<h2 class="text-danger">控制台信息</h2>
			<div class="row">
				<div class="col-md-10 ">
					<pre class="console">
0:0:0:0:0:0:0:1 - - [18/Nov/2016:19:01:41 +0800] "GET /fzg-web/resource/plugin/amazingUI/css/amazeui.min.css HTTP/1.1" 304 -
0:0:0:0:0:0:0:1 - - [18/Nov/2016:19:01:41 +0800] "GET /resource/images/sgoods_defualt.jpg HTTP/1.1" 404 1019
0:0:0:0:0:0:0:1 - - [18/Nov/2016:19:01:41 +0800] "GET /fzg-web/resource/plugin/layer_mobile/layer.css?2.0 HTTP/1.1" 304 -
0:0:0:0:0:0:0:1 - - [18/Nov/2016:19:01:41 +0800] "GET /fzg-web/resource/plugin/amazingUI/fonts/fontawesome-webfont.woff2?v=4.6.3 HTTP/1.1" 304 -
				</pre>
				</div>
			</div>
		</div>
	</div>

	<script type="text/template" id="bb">
<form class="form-horizontal dataform " style="padding:20px" >
		<div class="form-group">
								<label class="col-sm-3 control-label">请填写备注</label>
								<div class="col-sm-8">
									<input id="name"   class="form-control ">
								</div>
							</div>	
	<div class="form-group">
								<div class="col-sm-12 text-center">
									<button type="button" onclick="addTomcat()"  class="btn btn-success">创建</button>
								</div>
							</div>	
</form>
	</script>

	<script type="text/javascript"
		src="${path }/resource/js/systools/MJsBase.js"></script>
	<script type="text/javascript">
		getTomcatList();
		function updateRemark(){
			
						layer.msg("这个功能没做",{icon:2});
					
		}
			
		
		var currentTomcat={};
		function excute(order){
			if($("#tomcat-name").val()==""){
				layer.msg("发须选择tomcat才能发送命令");
				return false;
			}
		$.AjaxProxy({p:{order:order,name:$("#tomcat-name").val()}}).invoke(
					"${path}/excute",
					function(loj) {
						layer.msg(loj.getValue("info"),{icon:1});
					});
		}
		function upload(){
			if($("#tomcat-name").val()==""||$("#warfile").val()==""){
				layer.msg("发布前必须选择tomcat和war包");
				return false;
			}else{
				return true;
			}
		}
		
		function changeTomcat(name,remark,listen_port){
				$("#tomcat-name").val(name);
				$("#remark").val(remark);
				$("#listen_port").val(listen_port);
		}
		
		
		function getTomcatList() {

			$.AjaxProxy().invoke(
					"${path}/getTomcatList",
					function(loj) {
						var html = [];
						for (var i = 0; i < loj.getRowCount(); i++) {
							html[i] = '<li class="list-group-item" onclick="changeTomcat(\''+loj.getString(i, "name")+'\',\''+loj.getString(i, "remark")+'\',\''+loj.getString(i, "listen_port")+'\')" >'
									+ loj.getString(i, "name")+" :"
									+ loj.getString(i, "remark") + '</li>'
						}
						$("#treeDemo").html(html.join());
					});
		}

		function addTomcat() {
			if ($("#name").val() == "") {
				layer.msg("备注必须填写", {
					icon : 2
				});
				return false;
			}
			$.AjaxProxy({
				p : {
					remark : $("#name").val()
				}
			}).invoke("${path}/addTomcat", function(loj) {
				layer.msg(loj.getValue("info"), {
					icon : 1,
					time : 2000
				}, function() {
					layer.close(addIndex);
				});
				getTomcatList();

			});
		}

		var addIndex = 0;
		function openAddTomcat() {
			addIndex = layer.open({
				type : 1,
				title : "创建Tomcat",
				shadeClose : true,
				area : [ MUI.SIZE_S, '300px' ],
				content : $("#bb").html()
			});
		}
	</script>
</body>
</html>
